<%@ include file="/common/taglibs.jsp"%>
<%@ page pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>app</title>
		<script type="text/javascript" src="${jquery}/jquery.js"></script>
		<link rel="stylesheet" type="text/css"
			href="${easyui}/themes/default/easyui.css" id="change_style">
		<link rel="stylesheet" type="text/css"
			href="${easyui}/themes/default/menu.css">
		<script type="text/javascript" src="${easyui}/jquery.easyui.min.js"></script>
		<!-- colorbox -->
		<script type="text/javascript"
			src="${colorbox}/jquery.colorbox-min.js"></script>
		<link rel="stylesheet" type="text/css" href="${colorbox}/colorbox.css">
		<link rel="stylesheet" href="${ztree}/ztree/zTreejz.css"
			type="text/css">
		<script type="text/javascript" src="${ztree}/jquery.ztree.core.js"></script>
		<style type="text/css">
		a:link,a:visited,a:active {
			text-decoration: none;
		}
		
		a:hover {
			text-decoration: underline;
		}
		</style>
	</head>
	<body class="easyui-layout" style="overflow: hidden;">
		<div data-options="region:'north',border:false"
			style="height: 68px; padding: 0px 3px; overflow: hidden;">
			<div id="top">
				<div id="toppiz">
					<div class="huanying">
						<span id="lblBra">${name}</span>，欢迎您登录！ |
						<a href="j_spring_security_logout" class="linkbutton">退出</a>
					</div>
					<div class="anniu">
						<ul class="ui-skin-nav">
							<li class="li-skinitem" title="default">
								<span class="default" rel="default"></span>
							</li>
							<li class="li-skinitem" title="black">
								<span class="black" rel="black"></span>
							</li>
							<li class="li-skinitem" title="bootstrap">
								<span class="bootstrap" rel="bootstrap"></span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div data-options="region:'west',split:true,title:'功能菜单'"
			style="width: 200px;">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div data-options="region:'center'">
			<div id="tt" class="easyui-tabs" tools="#tab-tools" split="true"
				style="border: 0px;" fit="true">
			</div>

		</div>
		<div id="tabsMenu" class="easyui-menu" style="width: 120px;">
			<div name="close">
				关闭
			</div>
			<div name="Other">
				关闭其它
			</div>
			<div name="All">
				关闭所有
			</div>
		</div>
	</body>
</html>
<script LANGUAGE="JavaScript">
$(function() {
	var themes = {
		'default' : '${easyui}/themes/default/easyui.css',
		'black' : '${easyui}/themes/black/easyui.css',
		'bootstrap' : '${easyui}/themes/gray/easyui.css'
	};

	var skins = $('.li-skinitem span').click(function() {
		var $this = $(this);
		if($this.hasClass('cs-skin-on')) return;
		skins.removeClass('cs-skin-on');
		$this.addClass('cs-skin-on');
		var skin = $this.attr('rel');
		$('#change_style').attr('href', themes[skin]);
		setCookie('cs-skin', skin);
		skin == 'dark-hive' ? $('.cs-north-logo').css('color', '#FFFFFF') : $('.cs-north-logo').css('color', '#000000');
	});

	if(getCookie('cs-skin')) {
		var skin = getCookie('cs-skin');
		$('#change_style').attr('href', themes[skin]);
		$this = $('.li-skinitem span[rel='+skin+']');
		$this.addClass('cs-skin-on');
		skin == 'dark-hive' ? $('.cs-north-logo').css('color', '#FFFFFF') : $('.cs-north-logo').css('color', '#000000');
	}
});

function setCookie(name,value) {//两个参数，一个是cookie的名子，一个是值
    var Days = 30; //此 cookie 将被保存 30 天
    var exp = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getCookie(name) {//取cookies函数        
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}
var setting = {
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		onClick: onClick
	}
};

function onClick(event, treeId, treeNode, clickFlag) 
{
	var href = treeNode.href;
	if(null == href || "" == href){
		return;
	}
	var tt = $('#tt');
	//如果tab已经存在,则选中该tab  
	if (tt.tabs('exists', treeNode.name)){
		tt.tabs('select', treeNode.name);
		var currTab = tt.tabs('getTab', treeNode.name);
        var iframe = $(currTab.panel('options').content);
        var src = iframe.attr('src');
        tt.tabs('update', { tab: currTab, options: {content:createFrame(src,treeNode)} });
		return;
	}
	var ifs = createFrame(href,treeNode);
	tt.tabs('add',{
		title:treeNode.name,
		content:ifs,
		closable:true
	});
	
}
function createFrame(href,treeNode){
	if(href.indexOf("?") != -1){
		href += "&fid="+treeNode.id
	}else{
		href += "?fid="+treeNode.id
	}
	return "<iframe id='"+treeNode.id+"' frameborder='0'  src='"+href+"' style='width:100%;height:100%;'></iframe>";
}
$(document).ready(function(){
	$('body').layout('panel','west').panel();
	var m = ${menu};
	var treeObj = $.fn.zTree.init($("#treeDemo"), setting,m);
	var nodes = treeObj.getNodes();
	treeObj.expandNode(nodes[0], true, true, true);
	$("#tt").tabs('add',{
		title:"首页",
		content:"<iframe frameborder='0'  src='home.htm' style='width:100%;height:100%;'></iframe>",
		closable:false
	});
	 //绑定tabs的右键菜单
    $("#tt").tabs({
        onContextMenu : function (e, title) {
            e.preventDefault();
            $('#tabsMenu').menu('show', {
                left : e.pageX,
                top : e.pageY
            }).data("tabTitle", title);
        }
    });
    
    //实例化menu的onClick事件
    $("#tabsMenu").menu({
        onClick : function (item) {
            CloseTab(this, item.name);
        }
    });
    
    //几个关闭事件的实现
    function CloseTab(menu, type) {
        var curTabTitle = $(menu).data("tabTitle");
        var tabs = $("#tt");
        if (type === "close") {
            tabs.tabs("close", curTabTitle);
            return;
        }
        
        var allTabs = tabs.tabs("tabs");
        var closeTabsTitle = [];
        
        $.each(allTabs, function () {
            var opt = $(this).panel("options");
            if (opt.closable && opt.title != curTabTitle && type === "Other") {
                closeTabsTitle.push(opt.title);
            } else if (opt.closable && type === "All") {
                closeTabsTitle.push(opt.title);
            }
        });
        
        for (var i = 0; i < closeTabsTitle.length; i++) {
            tabs.tabs("close", closeTabsTitle[i]);
        }
    }
});
</script>